<template>
  <div class="Page_HomeStyleBox">
    <div class="Page_HomeStyleLeftBox">
      <PageHomeFromRouer></PageHomeFromRouer>
    </div>
    <div class="Page_HomeStyleRightBox">
      <div class="Page_HomeStyleHeadTitleBox">
        <PageHeadRigthFrom></PageHeadRigthFrom>
      </div>
      <div class="Page_HomeStyleRightHeadTitle">
        <p>
          <a-breadcrumb>
            <a-breadcrumb-item>&nbsp;&nbsp;工作台</a-breadcrumb-item>
            <a-breadcrumb-item></a-breadcrumb-item>
          </a-breadcrumb>
        </p>
        <h1>你好，gengyunfei123</h1>
        <p id="Character">你的角色:访问</p>
      </div>
      <div class="Page_HomeContextStyleBox">
        <div class="Page_HomeContextEchArTs">
          <div class="Page_HomeEchArTsTitle"><p>面板导航</p></div>
          <div class="Page_HomeEchArTsFrom">
            <HomeComCcharts></HomeComCcharts>
          </div>
        </div>
        <div class="Page_HomeContextRouterNavLink">
          <div class="Page_HomeContextRouterNavTitle"><p>快速导航</p></div>
          <div class="Page_HomeContextRouterNavLinkBox">
            <p>
              <router-link style="color: #000" to="/list">文章管理</router-link>
            </p>
            <p>
              <router-link style="color: #000" to="/comment"
                >评论管理</router-link
              >
            </p>
            <p>
              <router-link style="color: #000" to="/file">文件管理</router-link>
            </p>
            <p>
              <router-link style="color: #000" to="/user">用户管理</router-link>
            </p>
            <p>
              <router-link style="color: #000" to="/visit"
                >访问管理</router-link
              >
            </p>
            <p>
              <router-link style="color: #000" to="/system"
                >系统设置</router-link
              >
            </p>
          </div>
        </div>
        <div class="Page_HomeContextRouterLinkImgX">
          <div class="Page_HomeContextTitle">
            <p>最新文章</p>
            <p>
              <router-link style="color: #000" to="/list">全部文章</router-link>
            </p>
          </div>
          <div class="Page_HomeContextFromBoxCard">
            <a-card
              hoverable
              style="border: 1px solid #ccc; width: 490px; height: 190px"
            >
              <template #cover>
                <img
                  @click="CardLinkTo"
                  alt="example"
                  src="../../assets/d.png.png"
                  style="
                    margin: 20px 20px;
                    borderradius: 10px;
                    width: 380px;
                    height: 120px;
                  "
                />
                <p style="margintop: 5px; textalign: center">
                  I forever love you oh
                </p>
              </template>
              <template #actions>
                <setting-outlined key="setting" />
                <edit-outlined key="edit" />
                <ellipsis-outlined key="ellipsis" />
              </template>
            </a-card>
            <a-card
              hoverable
              style="border: 1px solid #ccc; width: 490px; height: 190px"
            >
              <template #cover>
                <img
                  @click="CardLinkTo"
                  alt="example"
                  src="../../assets/e.png.png"
                  style="
                    margin: 20px 20px;
                    borderradius: 10px;
                    width: 380px;
                    height: 120px;
                  "
                />
                <p style="margintop: 5px; textalign: center">
                  I forever love you oh
                </p>
              </template>
              <template #actions>
                <setting-outlined key="setting" />
                <edit-outlined key="edit" />
                <ellipsis-outlined key="ellipsis" />
              </template>
            </a-card>
            <a-card
              hoverable
              style="border: 1px solid #ccc; width: 490px; height: 190px"
            >
              <template #cover>
                <img
                  @click="CardLinkTo"
                  alt="example"
                  src="../../assets/f.png.png"
                  style="
                    margin: 20px 20px;
                    borderradius: 10px;
                    width: 380px;
                    height: 120px;
                  "
                />
                <p style="margintop: 5px; textalign: center">
                  I forever love you oh
                </p>
              </template>
              <template #actions>
                <setting-outlined key="setting" />
                <edit-outlined key="edit" />
                <ellipsis-outlined key="ellipsis" />
              </template>
            </a-card>
            <a-card
              hoverable
              style="border: 1px solid #ccc; width: 490px; height: 190px"
            >
              <template #cover>
                <img
                  @click="CardLinkTo"
                  alt="example"
                  src="../../assets/g.png.png"
                  style="
                    margin: 20px 20px;
                    borderradius: 10px;
                    width: 380px;
                    height: 120px;
                  "
                />
                <p style="margintop: 5px; textalign: center">
                  I forever love you oh
                </p>
              </template>
            </a-card>
            <a-card
              hoverable
              style="border: 1px solid #ccc; width: 490px; height: 190px"
            >
              <template #cover>
                <img
                  @click="CardLinkTo"
                  alt="example"
                  src="../../assets/h.png.png"
                  style="
                    margin: 20px 20px;
                    borderradius: 10px;
                    width: 380px;
                    height: 120px;
                  "
                />
                <p style="margintop: 5px; textalign: center">
                  I forever love you oh
                </p>
              </template>
            </a-card>
            <a-card
              hoverable
              style="border: 1px solid #ccc; width: 490px; height: 190px"
            >
              <template #cover>
                <img
                  @click="CardLinkTo"
                  alt="example"
                  src="../../assets/j.png.png"
                  style="
                    margin: 20px 20px;
                    borderradius: 10px;
                    width: 380px;
                    height: 120px;
                  "
                />
                <p style="margintop: 5px; textalign: center">
                  I forever love you oh
                </p>
              </template>
            </a-card>
          </div>
        </div>
        <div class="Page_HomeContextFrom">
          <div class="Page_HomeContextHead">
            <p>最新评论</p>
            <p>
              <router-link style="color: #000" to="/comment"
                >全部评论</router-link
              >
            </p>
          </div>
          <div class="Page_HomeContextFooter">
            <dl v-for="(item, idx) in Home_FromMockDataArray" :key="idx">
              <dt>
                <p>{{ item.name }}</p>
                <p>{{ item.sex }}</p>
                <p>{{ item.time }}</p>
              </dt>
              <dd>
                <router-link to="">通过</router-link>
                <router-link to="">拒绝</router-link>
                <router-link to="">回复</router-link>
                <router-link to="">删除</router-link>
              </dd>
            </dl>
          </div>
        </div>
        <div class="Page_HomeFooterStyleBox">
          <dl>
            <dt>
              <a href="https://github.com/fantasticit/wipi"
                ><img src="../../assets/b.png.png" alt=""
              /></a>
            </dt>
            <dd>Copyright ♠ 2022 Designed by Fantasticit.</dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
import HomeComCcharts from "../../components/HomeComCcharts";
import PageHeadRigthFrom from "../../components/PageHeadRigthFrom";
import PageHomeFromRouer from "../../components/PageHomeFromRouer";
export default {
  data() {
    return {
      Home_FromMockDataArray: [],
    };
  },
  created() {
    this.Home_EggMockData(); //后端数据
  },
  methods: {
    async Home_EggMockData() {
      let res = await Axios.get("/api/getMock");
      console.log(res, "Re");
      this.Home_FromMockDataArray = res.data.data;
    },
    CardLinkTo() {
      this.$router.push("/editor");
    },
  },
  components: {
    PageHomeFromRouer,
    PageHeadRigthFrom,
    HomeComCcharts,
  },
};
</script>

<style>
.Page_HomeStyleBox {
  width: 100%;
  height: 100%;
  display: flex;
}
.Page_HomeStyleLeftBox {
  width: 13%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background: #001529;
  border-right: 1px solid #ccc;
}
.Page_HomeStyleRightBox {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.Page_HomeStyleHeadTitleBox {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.Page_HomeEchArTsTitle {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
}
.Page_HomeEchArTsTitle > p {
  padding: 10px 20px;
}
.Page_HomeStyleRightHeadTitle {
  width: 100%;
  height: 150px;
  border-bottom: 1px solid #ccc;
}
.Page_HomeStyleRightHeadTitle > p > a {
  display: inline-block;
  margin-left: 30px;
  color: #000;
  margin-top: 10px;
}
.Page_HomeStyleRightHeadTitle > h1 {
  margin-left: 30px;
  font-weight: bold;
}
#Character {
  margin-top: 20px;
  margin-left: 30px;
}
.Page_HomeContextStyleBox {
  width: 100%;
  /* overflow-y: auto; */
  background: #eff2f5;
}
.Page_HomeFooterStyleBox {
  width: 100%;
  height: 180px;
  background: #eff2f5;
}
.Page_HomeFooterStyleBox > dl {
  text-align: center;
}
.Page_HomeFooterStyleBox > dl > dt {
  margin-top: 50px;
}
.Page_HomeFooterStyleBox > dl > dd {
  margin-top: 20px;
}
.Page_HomeContextEchArTs {
  /* width: 1300px; */
  height: 350px;
  margin-top: 20px;
  margin-left: 20px;
  background: #fff;
}
.Page_HomeEchArTsFrom {
  width: 100%;
  height: 300px;
}
.Page_HomeContextRouterNavLink {
  /* width: 1300px; */
  height: 150px;
  margin-top: 20px;
  margin-left: 20px;
  background: #fff;
}
.Page_HomeContextFrom {
  height: 400px;
  margin-top: 20px;
  margin-left: 20px;
  background: #fff;
}
.Page_HomeContextRouterNavTitle {
  width: 1300px;
  height: 50px;
  border-bottom: 1px solid #ccc;
}
.Page_HomeContextRouterNavTitle > p {
  padding: 10px 20px;
}
.Page_HomeContextRouterNavLinkBox {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.Page_HomeContextHead {
  height: 50px;
  display: flex;
  padding: 20px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.Page_HomeContextTitle {
  width: 100%;
  height: 50px;
  display: flex;
  padding: 5px 15px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.Page_HomeContextRouterLinkImgX {
  width: 100%;
  height: 431px;
  background: #fff;
  margin-top: 20px;
  margin-left: 20px;
  border-bottom: 1px solid #ccc;
}
.Page_HomeContextCardImgX {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.Page_HomeContextFromBoxCard {
  width: 100%;
  height: 381px;
  display: flex;
  flex-wrap: wrap;
}
.Page_HomeContextFooter {
  width: 100%;
  height: 100%;
}
.Page_HomeContextFooter > dl {
  width: 100%;
  height: 46px;
  display: flex;
  padding: 0px 50px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.Page_HomeContextFooter > dl > dt {
  width: 230px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Page_HomeContextFooter > dl > dd {
  width: 230px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>